<template>
	<el-menu>
		<template v-for="(item, index) in menuData">
			<el-sub-menu v-if="item.children" :index="item.id">
				<template #title>
					<div class="nenus-name">{{ item.name }}</div>
					<el-icon @click="deleteConnect"><delete /></el-icon>
				</template>
				<template v-for="(value, key) in item.children">
					<el-sub-menu :index="item.id + '-' + key">
						<template #title>{{ value.label }}</template>
						<template v-for="(nav, navIndex) in value.data">
							<el-menu-item :index="item.id + '-' + key + '-' + nav">
								<div class="nenus-name" @click="showPane(item.id, value.type, nav)">{{ nav }}</div>
							</el-menu-item>
						</template>
					</el-sub-menu>
				</template>
			</el-sub-menu>
			<el-menu-item v-else :index="index">
				<div class="nenus-name" @click="expand(item.id)">{{ item.name }}</div>
				<el-icon @click="deleteConnect"><delete /></el-icon>
				<!-- <el-icon @click="connect(item)"><Connection /></el-icon> -->
			</el-menu-item>
		</template>
	</el-menu>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { Delete, Connection } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router'

	const router = useRouter()
	
	const props = defineProps({
		addTab: {
			type: Function
		}
	})
	
	const { appContext } = getCurrentInstance();
	const $axios = appContext.config.globalProperties.$axios;
	
	const menuData = ref([])
	
	const deleteConnect = () => {
		ElMessage.success('连接成功')
	}
	
	const getConnectList = () => {
		$axios.get("/own/list").then(res => {
			console.log(res)
			menuData.value = res
		})
	}
	
	const expand = (id) => {
		$axios.get("/own/expand?id=" + id).then(res => {
			console.log(res)
			for (const i in menuData.value) {
				if (menuData.value[i].id === id) {
					menuData.value[i].children = res
				}
			}
		})
	}
	
	const showPane = (id, type, name) => {
		console.log(id, type, name)
		const data = {
			id: id,
			type: type,
			name: name
		}
		props.addTab(data)
		router.push({
			path: "/table",
			query: data
		})
	}
	
	getConnectList()
	
	defineExpose({
		getConnectList,
		expand
	})
</script>

<style lang="scss" scoped>
	.nenus-name {
		width: 200px;
	}
</style>